<template>
    <div class="ai-container" >
        <el-row :gutter="20">
            <el-col :span="2">
                <div class="ai-left">
                    <div>
                        <img src="@/assets/images/img_logo.png" style="width: 50px;">
                    </div>

                    <div class="ai-left-menu-item">
                        <div style="margin-top:70px">
                            <img src="@/assets/images/img_chat2.png" style="width: 40px;">
                        </div>
                        <div style="font-size: 14px;text-align: center;color:#606266">对话</div>
                    </div>

                    <div class="ai-left-menu-item">
                        <div style="margin-top:30px">
                            <img src="@/assets/images/img_set.png" style="width: 40px;">
                        </div>
                        <div style="font-size: 14px;text-align: center;color:#606266">智能体</div>
                    </div>

                    <div class="ai-left-menu-item">
                        <div style="margin-top:30px">
                            <img src="@/assets/images/img_more.png" style="width: 40px;">
                        </div>
                        <div style="font-size: 14px;text-align: center;color:#606266">更多</div>
                    </div>

                </div>
            </el-col>
            <el-col :span="22" style="padding-right:40px">
                <div class="ai-right">
                    <div class="ai-list-container" ref="aiListContainer">
                        <div class="message-row" v-for="(item, index) in chatArr" :key="index"
                            :class="item.role === 'customer' ? 'customer-message-row' : ''">
                            <img v-if="item.role === 'ai'" src="@/assets/images/img_circle.webp"
                                style="width: 30px;margin-right:10px;margin-top:5px">

                            <div v-if="item.type === 'text'" class="message-box"
                                :class="item.role === 'customer' ? 'customer-message-box' : 'ai-message-box'">
                                <span v-html="item.content"></span>
                                <i v-if="item.role === 'ai' && index === chatArr.length - 1 && running === true"
                                    class="iconfont icon-gengduo fade-element" style="color:#606266"></i>

                                <div v-if="item.role === 'ai'" style="margin-top: 10px;" class="status-row">
                                    <span>{{ item.status }}</span>
                                    <i v-if="item.status==='回答完成'" class="iconfont icon-completed" style="color: #67C23A;margin-left: 5px;font-size: 12px;"></i>
                                </div>
                            </div>


                            <el-image v-if="item.type === 'image'"
                                style="width: 100px; height: 100px;border-radius: 10px;" :src="item.content"
                                fit="fill" />

                            <div v-if="item.type === 'document'" class="document-message-box">
                                <img src="@/assets/images/img_doc.png" style="width:30px;margin-right:10px" />
                                <div>
                                    <div style="font-size:14px">{{ (item.content as documentInfoVO).name }}</div>
                                    <div style="color:#A3A6AD;font-size: 10px;">
                                        {{ (item.content as documentInfoVO).size}} KB
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>

                    <div class="ai-submit-container" v-loading="uploading">
                        <template v-if="fileArr.length > 0">
                            <div class="image-list-row" v-if="currentUploadType === 'image'">
                                <div v-for="(item, index) in fileArr" :key="index">
                                    <el-image style="width: 50px; height: 50px;margin-right:10px;border-radius: 10px;"
                                        :src="item.imgurl" fit="fill" />
                                </div>
                            </div>

                            <div class="document-list-row" v-if="currentUploadType === 'document'">
                                <div v-for="(item, index) in fileArr" :key="index" class="document-item">
                                    <img src="@/assets/images/img_doc.png" style="width:30px;margin-right:10px" />
                                    <div>
                                        <div style="font-size:14px">{{ item.documentInfo.name }}</div>
                                        <div style="color:#A3A6AD;font-size: 10px;">{{ item.documentInfo.size }} KB
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </template>

                        <div class="submit-row">
                            <div class="upload-box">
                                <el-upload :show-file-list="false" action="#"
                                    :http-request="(e: uploadFileVO) => handleUpload(e, 'image')" multiple
                                    :accept="imageAcceptType">
                                    <el-tooltip effect="light" content="上传图片" placement="top-start">
                                        <img src="@/assets/images/img_images.png" alt="上传图片"
                                            style="width: 22px;margin-right: 20px;">
                                    </el-tooltip>
                                </el-upload>

                                <el-upload :show-file-list="false" action="#"
                                    :http-request="(e: uploadFileVO) => handleUpload(e, 'document')" multiple :limit="10"
                                    :accept="doucmentAcceptType">
                                    <el-tooltip effect="light" content="上传文件" placement="top-start">
                                        <img src="@/assets/images/img_files.png" alt="上传文件" style="width: 22px;">
                                    </el-tooltip>
                                </el-upload>

                            </div>
                            <div style="flex-grow: 1;">
                                <input v-model="keyword" @keyup.enter="handleSubmit()" type="text" placeholder="请输入你的问题"
                                    class="ai-submit-input">
                            </div>
                            <div>
                                <div v-if="!running" @click="handleSubmit()" class="ai-submit-btn"
                                    :style="{ 'background': !isCanSubmit ? '#C0C4CC' : 'linear-gradient(to right, #3ee8ff, #5a50f7)' }">
                                    <i class="iconfont icon-fasong5" style="font-size: 20px;"></i>
                                </div>


                                <div v-else class="ai-submit-btn" @click="handleStop()">
                                    <i class="iconfont icon-lujing" style="font-size: 14px;"></i>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </el-col>
        </el-row>

    </div>

</template>


<script setup lang="ts">

import { chatItemVO, fileItemVO, uploadFileVO, documentInfoVO } from "@/interface/interface"
import { ref, watch, onMounted } from "vue"
import emitter from "@/utils/emitter"


const aiListContainer = ref<HTMLDivElement | null>(null)

emitter.on('scrollToBottom', () => {
    if (aiListContainer.value) {
        aiListContainer.value.scrollTop = aiListContainer.value.scrollHeight;
    }
})
emitter.on('clearKeyword', () => {
    keyword.value = ""
})

const keyword = ref("")
const emits = defineEmits(['handleInput'])
const props = defineProps({
    uploading: {
        type: Boolean,
        default: false
    },
    isCanSubmit: {
        type: Boolean,
        default: false
    },
    chatArr: {
        type: Array as () => chatItemVO[],
        default: []
    },
    fileArr: {
        type: Array as () => fileItemVO[],
        default: []
    },
    currentUploadType: {
        type: String,
        default: ""
    },
    fileList: {
        type: Array,
        default: []
    },
    handleUpload: {
        type: Function,
        default: () => { }
    },

    imageAcceptType: {
        type: String,
        default: ""
    },
    doucmentAcceptType: {
        type: String,
        default: ""
    },

    handleSubmit: {
        type: Function,
        default: () => { }
    },

    running: {
        type: Boolean,
        default: false
    },
    handleStop: {
        type: Function,
        default: () => { }
    },
})



watch(keyword, (value) => {
    emits("handleInput", value)
})



</script>

<style scoped>

.upload-box {
    display: flex;
    align-items: center;
}

.message-row {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 20px auto;
    overflow-x: hidden;
}

.message-box {
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    font-size: 14px;
    color: #606266;
}

.document-message-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #f2f6fc;
    padding: 5px 10px;
    margin: 10px 5px;
    border-radius: 10px;
    background: #fff;
}

.customer-message-row {
    justify-content: flex-end;
}

/* .customer-message-box {
    background: #46a0fc;
    background: linear-gradient(to right, #3ee8ff, #5a50f7);
    color: #fff;
} */

.ai-submit-input {
    all: unset;
    width: 90%;
    padding-left: 20px;
    /* box-align: ; */
}

.ai-submit-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #409eff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-list-container {
    width: 100%;
    height: 80%;
    overflow-y: scroll;
    flex-grow: 1;
}

.ai-submit-container {
    width: 100%;
    /* height: 50px; */
    background: #fff;
    border-radius: 10px;
    padding: 10px 10px 10px 20px;
    border: 1px solid #dcebfc;
    /* border-image-source: linear-gradient(to right, #8f41e9, #578aef);
    border-image-slice: 1; */
}

.ai-submit-container .image-list-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* border-bottom: 1px solid #f0f0f0; */
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.ai-submit-container .document-list-row {
    display: flex;
    /* flex-direction:column ; */
    justify-content: flex-start;
    align-items: flex-start;
    /* border-bottom: 1px solid #f0f0f0; */
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.ai-submit-container .document-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #f2f6fc;
    padding: 5px 10px;
    margin: 10px 5px;
    border-radius: 10px;
}



.ai-submit-container .submit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ai-right {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 90vh;
    margin: 2vh auto;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.ai-left-menu-item {
    cursor: pointer;
}

.ai-menu-item {
    /* background: rgba(168, 214, 248, 0.3); */
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    /* font-size:25px; */
    border-radius: 50%;
    color: #fff;
    margin-top: 30px;
}

.ai-left {
    /* height: 100vh; */
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.ai-container {
    width: 100vw;
    height: 100vh;
    /* background: url("@/assets/images/img_bg.jpeg");
    background-position: left;
    background-size: cover; */
    /* background-image: linear-gradient(135deg, #f1f6fc, #a6d7f8, #f1f6fc); */
    background-image: linear-gradient(135deg, #a6d7f8, #f1f6fc, #a6d7f8);
}

.customer-message-box {
    /* background: #46a0fc; */
    background: linear-gradient(to right, #3ee8ff, #5a50f7);
    color: #fff;
    border-radius: 20px 20px 0 20px;
}

.ai-message-box {
    border-radius: 20px 20px 20px 0;
}

/* 定义动画 */
@keyframes fadeInOut {

    0%,
    100% {
        opacity: 1;
        /* 完全不透明 */
    }

    50% {
        opacity: 0;
        /* 完全透明 */
    }
}

/* 应用动画到元素 */
.fade-element {
    animation: fadeInOut 2s infinite;
    /* 动画名称 持续时间 无限循环 */
}
</style>
